<template>
  <div class="check-box">
    <el-form ref="refForm" class="sun-form-title" :model="formData" :rules="formRules">
      <el-form-item
        label="名称"
        prop="name"
      >
        <el-input v-model="formData.name" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item
        label="权限"
        prop="permissions"
      >
        <el-tree
          ref="my-tree"
          :data="roleList"
          :default-checked-keys="defaultCheckedKeys"
          node-key="id"
          show-checkbox
          accordion
          check-on-click-node
          :default-expand-all="false"
          :expand-on-click-node="false"
          :render-content="renderContent"
          @check="handleCheckChange"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import roleData from './roleList'
export default {
  name: 'PolePermission',
  props: {
  },
  data() {
    return {
      checked: [], // 默认选中的数据
      formRules: {
        'name': [{ required: true, trigger: 'blur', info: '请输入角色名称！', validator: this.$onValidator }],
        'permissions': [{ required: true, trigger: 'blur', info: '请选择权限！', validator: this.$onValidator }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    formData() {
      return this.$parent.$parent.formData
    },
    roleList() {
      return this.$parent.$parent.roleList
    },
    defaultCheckedKeys() {
      return this.$parent.$parent.defaultCheckedKeys
    }
  },
  methods: {
    renderContent(h, { node, data, store }) {
      node.parent.data.children?.forEach(item => {
        if (item.index) {
          data['requiredIndexId'] = item.id
        }
      })
      return (
        <div>{data.title}</div>
      )
    },
    handleCheckChange(currentData, checkedData) {
      const _that = this
      let is_setParent = false
      // 选择非index项
      if (currentData.id !== currentData.requiredIndexId && _that.$refs['my-tree'].getNode(currentData.id).checked) {
        if (currentData.requiredIndexId) {
          _that.$refs['my-tree'].setChecked(currentData.requiredIndexId, true, false) // 设置index选中
          checkedData.checkedKeys.push(currentData.requiredIndexId) // 需要把setChecked放在提交列表中
        }
        if (!_that.$refs['my-tree'].getNode(currentData.id).parent.parent) {
          _that.$set(_that.formData, 'permissions', checkedData.checkedKeys.concat(checkedData.halfCheckedKeys))
          return
        }
        console.log('============', _that.$refs['my-tree'].getNode(currentData.id))
        if (!is_setParent) {
          const dataChildren3 = _that.$refs['my-tree'].getNode(currentData.id).parent.parent.parent.data.children
          dataChildren3?.forEach(el => {
            if (el.index) {
              console.log('处理了3')
              is_setParent = true
              _that.$refs['my-tree'].setChecked(el.id, true, false)
              checkedData.checkedKeys.push(el.id)
            }
          })
        }
        if (!is_setParent) {
          const dataChildren2 = _that.$refs['my-tree'].getNode(currentData.id).parent.parent.data.children
          dataChildren2?.forEach(el => {
            if (el.index) {
              is_setParent = true
              _that.$refs['my-tree'].setChecked(el.id, true, false)
              checkedData.checkedKeys.push(el.id)
            }
          })
        }
        if (!is_setParent) {
          const dataChildren1 = _that.$refs['my-tree'].getNode(currentData.id).parent.data.children
          dataChildren1?.forEach(el => {
            if (el.index) {
              is_setParent = true
              console.log('处理了1')
              _that.$refs['my-tree'].setChecked(el.id, true, false)
              checkedData.checkedKeys.push(el.id)
            }
          })
        }
        console.log('is_setParent', is_setParent)
        console.log('选择非index项-----当前选项', currentData)
      }
      _that.$set(_that.formData, 'permissions', checkedData.checkedKeys.concat(checkedData.halfCheckedKeys))
      console.log('_that.formData', _that.formData)
      // 取消index项
      if (currentData.id === currentData.requiredIndexId && !_that.$refs['my-tree'].getNode(currentData.id).checked) {
        const cancelList = _that.$refs['my-tree'].getNode(currentData.id).parent.childNodes // 根据当前点击的id 获取父级下的所有子项
        _that.setChildNodesChecked(cancelList) // 递归取消数据
        console.log('取消index项-----当前选项', currentData)
      }
    },
    setChildNodesChecked(data) {
      const _that = this
      data?.forEach((cancel, cancel_index) => {
        if (cancel.checked) {
          _that.$refs['my-tree'].setChecked(cancel.data.id, false, false) // 取消选中
          _that.$parent.$parent.formData.permissions.splice(_that.$parent.$parent.formData.permissions.findIndex(arrId => arrId === cancel.data.id), 1) // 移除提交中的id
        }
        if (cancel_index === data.length - 1) { // 移除父级id
          _that.$parent.$parent.formData.permissions.splice(_that.$parent.$parent.formData.permissions.findIndex(arrId => arrId === cancel.data.parent_id), 1)
        }
        if (cancel.parent.level === 2) {
          const parentItem = _that.$refs['my-tree'].getNode(cancel.parent.data.parent_id)
          if (!parentItem.checked && !parentItem.indeterminate) _that.$parent.$parent.formData.permissions.splice(_that.$parent.$parent.formData.permissions.findIndex(arrId => arrId === cancel.parent.data.parent_id), 1)
        }
        cancel.childNodes && cancel.childNodes.length > 0 ? this.setChildNodesChecked(cancel.childNodes) : []
      })
    },
    getRefForm() {
      return this.$refs.refForm
    }
  }
}
</script>
<style lang="scss" scoped>
.sun-form-title  ::v-deep {
  .el-form-item__label{
    display: block !important;
    text-align: left !important;
    float: none !important;
    padding: 0 !important;
  }
  .el-tree-node__content{
    height: auto !important;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

</style>
